<template>
	<view class="countdown">
		<view class="price">
			<view class="now_price"><text>&yen;</text>{{ ProductBody.now_price }}</view>
			<view class="storenums">
				<view class="origin">&yen;{{ ProductBody.orgin_price }}</view>
				<view class="grab">已抢{{ ProductBody.show_sell_count }}件</view>
			</view>
		</view>
		<view class="count">
			<view class="fnTimeCountDown">
				<text class="desc">距结束</text>
				<text v-if="year > 0">{{ year }}年</text>
				<text v-if="year > 0 || month > 0">{{ month }}月</text>
				<text v-if="year > 0 || month > 0 || day > 0">{{ day }}天</text>
				<text>{{ hour }}<text class="spt">:</text></text>
				<text>{{ mini }}<text class="spt">:</text></text>
				<text>{{ sec }}<text class="spt">.</text></text>
				<text class="hm">{{ hm }}</text>
			</view>
			<view class="process">
				<view class="complete"></view>
				<view class="text">已抢1%</view>
			</view>
		</view>
		<image src="/static/ms.png"></image>
	</view>
</template>

<script>
	export default {
		props: {
			ProductBody:Object,
			active: Object
		},
		created() {
			this.CountTime()
			//console.log(this.active)
		},
		deactivated() {
			clearTimeout(this.time)
		},
		data () {
			return {
				time: 0,
				hm: '000',
				sec: '00',
				mini: '00',
				hour: '00',
				day: '00',
				month: '00',
				year: '00'
			}
		},
		methods: {
			CountTime () {
				let _this = this
				const f = {
					haomiao (n) {
// 						if (n < 10) return `00${n.toString()}`
// 						if (n < 100) return `0${n.toString()}`
						return ((n / 100).toFixed(0)).toString()
					},
					zero (m) {
						let n = parseInt(m, 10)
						if (n > 0) {
							if (n <= 9) {
								n = `0${n}`
							}
							return String(n)
						} else {
							return '00'
						}
					},
					dv () {
						let _d = _this.active.countdown_time.replace(/-/ig, '/')
						let now = new Date()
						let end = new Date(_d)
						let dur = (end - now.getTime()) / 1000
						let mss = end - now.getTime()
						if (mss > 0) {
							_this.hm = f.haomiao(mss % 1000) // 毫秒
							_this.sec = f.zero(dur % 60) //秒
							_this.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00"; //分
							_this.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00"; // 时
							_this.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : 0; // 天
							//月份，以实际平均每月秒数计算
							_this.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : 0;
							//年份，按按回归年365天5时48分46秒算
							_this.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : 0;
							//console.log(day, hour, mini ,sec, hm)							
						} else {
							clearTimeout(this.time)
							this.hm = '0'
							_this.$emit('on-hide')
							return
						}
						this.time = setTimeout(f.dv, 1)
					}
				}
				f.dv()
			}
		}
		
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.countdown, .countdown .price,.countdown .count .process .text {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.countdown, .countdown .price {
	justify-content: space-between;             
}
.countdown {
	background-color:@red;
	padding: 10upx 30upx;
	position: relative;
	.desc {
		padding-right: 20upx;
	}
	.spt { padding: 4upx; }
	& > image {
		width: 60upx;
		height: 60upx;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0,-50%)
	}
	.price {
		color:white;
		.storenums {
			.origin {
				font-size:@minSize;
				color:#ff7f7f;text-decoration: line-through;margin-bottom: 2px
			}
			.grab {
				font-size:@minSize;
			}
		}
		.now_price {
			font-size: 56upx;
			font-weight: bold;
			margin-right: 10px;			
			text {
				font-size:@minSize;
			}
		}
	}
	.fnTimeCountDown {
		padding-right: 20upx;
		text {
			color:#ffd088;font-size: 12px;display: inline-block;
			&.hm { min-width: 28upx; }
		}
	}
	.count {
		.process { 
			height: 24upx;
			background-color: #f7cccc;
			width: 90%;
			overflow: hidden;
			border-radius: 10upx;
			margin: 10upx 0;
			position: relative;
			.complete {
				background:#ffd088;
				height: 100%;
				width: 100%; 				
			}
			.text {
				position: absolute;
				font-size: @minSize;
				color: white;
				width: 100%;
				z-index: 99;
				height: 100%;
				left: 0;
				top: 0;
				justify-content: center;
				transform: scale(.7);
			    text {
					display: block;
					transform: scale(.7);
					color:#e43130;					
				}
			}
		}
	}
}
</style>
